import React from 'react';
import { Input, Button } from 'antd';
import {MP} from "../../utils/map";

class ChooseSite extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            positionInfo:{}
        }

    }

    componentDidMount(){
        MP().then((AMap)=>{
            var map = new AMap.Map(this.refs.map, {
                center: [this.props.position[0], this.props.position[1]],
                zoom:16
            });
            window.initAMapUI();
            window.AMapUI.loadUI(['misc/PoiPicker','misc/PositionPicker'], (PoiPicker,PositionPicker)=> {

                var poiPicker = new PoiPicker({
                    input: 'pickerInput'
                });

                poiPickerReady(poiPicker);

                var positionPicker = new PositionPicker({
                    mode: 'dragMap',
                    map: map
                });
                positionPicker.on('success', (positionResult)=>{
                    // console.log(positionResult);
                    this.setState({
                        positionInfo:positionResult
                    })
                });
                positionPicker.start();
                map.panBy(0, 1);
            });

             let poiPickerReady=(poiPicker)=> {
                window.poiPicker = poiPicker;
                poiPicker.on('poiPicked', (poiResult)=> {
                    var poi = poiResult.item;
                    this.setState({
                        positionInfo:poiResult
                    });
                    map.setCenter(poi.location);
                });
            }
        }).catch(e=>{
            console.log(e)
        })

    }

    getInfo=()=>{
        this.props.handleCancel();
        this.props.getMapInfo(this.state.positionInfo)
    };

    render() {
        return (
            <div style={{position:'relative'}}>
                <div tabIndex="0" style={{height:'75vh'}} ref={'map'}/>
                <div id="pickerBox">
                    <Input  id={'pickerInput'} placeholder="输入关键字选取地点"/>
                    <Button type={'primary'} onClick={this.getInfo}>确定</Button>
                    <div id="poiInfo"></div>
                </div>
            </div>
        )
    }
}

export default ChooseSite